.th-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;

  .icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 100%;
    color: $input-color;

    svg {
      color: $input-placeholder-color;
    }
  }
}

.icon-wrapper + .th-input-inner {
  padding-right: 35px;
}

.th-input-inner {
  width: 100%;
  min-width: 0;
  padding: $input-padding-y-base $input-padding-x-base;
  color: $input-color;
  font-weight: $input-font-weight;
  font-size: $input-font-size;
  font-family: $input-font-family;
  line-height: $input-line-height;
  background-clip: padding-box;
  border: $input-border-width solid $input-border-color;

  border-radius: $input-border-radius;

  box-shadow: $input-box-shadow;
  transition: $input-transition;

  &:focus {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    outline: 0;
    box-shadow: $input-focus-box-shadow;
  }

  &:hover {
    color: $input-focus-color;
    border-color: $primary;
  }

  &::placeholder {
    color: $input-placeholder-color;
    opacity: 1;
  }

  &-disabled {
    &:hover {
      border-color: $input-border-color;
    }
  }

  &:disabled,
  &[readonly] {
    background-color: $input-disabled-bg;
    border-color: $input-border-color;
    cursor: not-allowed;
    opacity: 1;

    &:hover {
      border-color: $input-border-color;
    }
  }
}

.th-input-group-wrapper {
  position: relative;
  display: table;
  vertical-align: top;
  border-collapse: separate;
  border-spacing: 0;

  .th-input-inner {
    float: left;
    margin-bottom: 0;
  }
}

.th-input-group-prepend,
.th-input-group-append {
  &.th-input-inner {
    display: table-cell;
  }

  display: table-cell;
  margin-bottom: 0;
  padding: 0 $input-padding-x;
  color: $input-group-addon-color;
  font-weight: $font-weight-normal;
  font-size: $input-font-size;
  line-height: $input-line-height;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background-color: $input-group-addon-bg;
  border: $input-border-width solid $input-group-addon-border-color;
  border-radius: $input-border-radius;
}

.th-input-group-append + .btn {
  padding: 0;
  border: 0;
}

.th-input-group-wrapper > .th-input-group-prepend,
.th-input-group-wrapper.input-group-append > .th-input-inner {
  @include border-right-radius(0);
}

.th-input-group-wrapper > .th-input-group-append,
.th-input-group-wrapper.input-group-prepend > .th-input-inner {
  @include border-left-radius(0);
}

.th-input-group-wrapper.input-group-prepend > .th-input-group-prepend {
  @include border-width-zero('right');
}

.th-input-group-wrapper.input-group-append > .th-input-group-append {
  @include border-width-zero('left');
}

.input-size-sm .th-input-inner {
  padding: $input-padding-y-sm $input-padding-x-sm;
  font-size: $font-size-sm;
  border-radius: $input-border-radius-sm;
}

.input-size-lg .th-input-inner {
  padding: $input-padding-y-lg $input-padding-x-lg;
  font-size: $font-size-lg;
  border-radius: $input-border-radius-lg;
}
